import React from "react"
import styles from '@/assets/css/login.module.css'

export default () => {
    // 创建表单的控制实例
    const [form] = React.UI.Form.useForm()

    // 验证用户是否已登录
    const IsLogin = () => {
        if(Object.getOwnPropertyNames(React.business).length > 0)
        {
            React.toast('请勿重复登录', 'fail', 'back')
            return false
        }
    }
    IsLogin()

    // 登录注册
    const Login = async (values: any) => {
        let result = await React.request.post('/business/UserLogin', values)

        if(result.code == 0)
        {
            React.toast(result.msg, 'fail')
            return false
        }

        // 存储用户信息到cookie
        React.cookies.save('business', result.data, {path: '/'})
        React.business = result.data

        React.toast(result.msg, 'success', () => React.navigate(result.url))
    }

    return (
        <>
           <div className={styles.headers}>
                <div className={styles.userinfo}>
                    <h3 className={styles.title}>欢迎使用酒店预订</h3>
                </div>
                <div className={styles.corrugated}>
                    <div className={`${styles.wave_top} ${styles.wave_item}`}></div>
                    <div className={`${styles.wave_middle} ${styles.wave_item}`}></div>
                </div>
            </div> 

            <div className={styles.login}>
                <React.UI.Form
                    layout='horizontal'
                    mode='card'
                    form={form}
                    onFinish={Login}
                    footer={
                        <div style={{margin: '16px 16px 0'}}>
                            <React.UI.Button block shape='rounded' type='submit' color='primary'>
                                注册登录
                            </React.UI.Button>
                        </div>
                    }    
                >
                    <React.UI.Form.Item
                        name='mobile'
                        label='手机号码'
                        initialValue='13888888666'
                        rules={[
                            {required: true, message: '请输入手机号码'},
                            {pattern: /^1[356789]\d{9}$/, message: '请输入正确格式的手机号码'}
                        ]}
                    >
                        <React.UI.Input placeholder='请输入手机号码' />
                    </React.UI.Form.Item>

                    <React.UI.Form.Item
                        name='password'
                        label='密码'
                        initialValue='123456'
                        rules={[{required: true, message: '请输入密码'}]}
                    >
                        <React.UI.Input placeholder='请输入密码' type='password' />
                    </React.UI.Form.Item>
                </React.UI.Form>
            </div>
        </>
    )
}